// 获取尺寸
// 移入移出
// 点击切换
// 移动跟随


// 定义一个类
class Enlarge{
    constructor(option){
        this.ele = document.querySelector(option)
        this.show = this.ele.querySelector('.show')
        this.mask = this.ele.querySelector('.mask')
        this.list = this.ele.querySelector('.list')
        this.enlarge = this.ele.querySelector('.enlarge')
        this.picture = this.enlarge.firstElementChild;


        // 获取show盒子的尺寸
        this.show$w = this.show.clientWidth;
        this.show$h = this.show.clientHeight;
        
        // 获取mask遮罩层盒子的尺寸
        this.mask$w = parseInt(window.getComputedStyle(this.mask).width);
        this.mask$h = parseInt(window.getComputedStyle(this.mask).height);
        
        // 获取enlarge下的盒子的尺寸
        this.picture$w = parseInt(window.getComputedStyle(this.picture).width)
        this.picture$h = parseInt(window.getComputedStyle(this.picture).height)

         // 获取尺寸
    this.Getdimensions()
    // 移入移出
    this.Moveout()
    // 点击切换
    this.Clickswitch()
    // 移动跟随
    this.Mobilefollow()
    }


    // 计算放大镜的盒子的尺寸
    Getdimensions(){
        this.enlarge$w = this.mask$w * this.picture$w / this.show$w;
        this.enlarge$h = this.mask$h * this.picture$h / this.show$h;

        // 赋值给放大镜的盒子
        this.enlarge.style.width = this.enlarge$w + 'px'
        this.enlarge.style.height = this.enlarge$h + 'px'

    }

    // 移入移出
    Moveout(){
        // 给show盒子绑定移入和移出事件
        this.show.addEventListener('mouseover' , () => {
            this.mask.style.display = 'block';
            this.enlarge.style.display = 'block'
        })
        this.show.addEventListener('mouseout' , () => {
            this.mask.style.display = 'none';
            this.enlarge.style.display = 'none';
        })
    }

    // 点击切换
    Clickswitch(){
        // 给list添加绑定点击事件
        this.list.addEventListener('click' , e =>{
            e = e || window.event;



            // 目标元素
            var target = e.target || e.srcElement;

            for(let i = 0; i<this.list.children.length; i++){
                // 删除类名
                this.list.children[i].classList.remove('active')

            }
            // 对应的添加类名
            target.classList.add('active')


            // 切换图片  获取地址
            const showSrc = target.dataset.show;
            const bgSrc = target.dataset.bg;


            // 显示对应的位置
            
            this.show.firstElementChild.src = showSrc;
            this.picture.src = bgSrc
        })
    }

    // 移动跟随
    Mobilefollow(){
        // 给shou盒子添加鼠标移动事件
        this.show.addEventListener('mousemove' , e => {
            // 事件对象兼容
        e = e || window.event;
        // 获取箭头移动图片对应的坐标点
            let x = e.offsetX - this.mask$w / 2;
            let y = e.offsetY - this.mask$h / 2;

            // 限定鼠标移出盒子以外的边界范围
            if(x < 0) x=0
            if(y < 0) y=0
            if(x >= this.show$w - this.mask$w) x = this.show$w - this.mask$w
            if(y >= this.show$h - this.mask$h) y = this.show$h - this.mask$h


            // 赋值mask
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'

            // 计算移动比例
            const pictureLeft = x * this.enlarge$w / this.mask$w;
            const pictureTop = y * this.enlarge$h / this.mask$h;

            // 赋值给放大的图
            this.picture.style.left = -pictureLeft + 'px'
            this.picture.style.top = -pictureTop + 'px'

        })
    }
}